/*
 * @Author: jiu yin
 * @Date: 2024-05-06 18:15:37
 * @LastEditTime: 2024-06-05 18:25:50
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\scene_studio\index.tsx
 * jiu
 */
import { RightOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import "./index.scss";
import { Tag } from "antd";
import { top_infobox } from "@/api/home";
import PicoList from "./component/PicoList";
import SceneList from "./component/SceneList";
import Add_edit from "./component/add_edit";

export default function index() {
	//上方信息
	let [top_info, setTop_info] = useState<any>({});
	useEffect(() => {
		top_infobox().then((res: any) => {
			setTop_info(res.data);
		});
	}, []);

	//添加 编辑
	let [isModalOpenAdd, setIsModalOpenAdd] = useState(false);

	//设备状态
	let [isModalOpen, setIsModalOpen] = useState(false);
	let [status, setStatus] = useState(1);
	const view_status = (status: number) => {
		setStatus(status);
		setIsModalOpen(true);
	};

	return (
		<div className="base_bg_fff scene_studio overflow-y-auto" id="control">
			<ul className="flex items-center gap-20px font-600">
				<li className="flex-1 h-160px controlBg1 cursor-pointer" onClick={() => setIsModalOpenAdd(true)}>
					<div className="flex flex-col items-center mt-20px">
						<div className="controlIcon1 w-48px h-48px"></div>
						<p className="c-#373B96 text-16px font-700 mt-5px">创建场景方案</p>
					</div>
				</li>

				<li className="flex-1 h-160px controlBg2  c-#fff cursor-pointer" onClick={() => view_status(1)}>
					<div className="flex justify-center mt-20px">
						<div className="controlIcon2 w-80px h-80px mr-40px"></div>
						<div>
							<p className="text-44px font-700">{top_info.idle_devices}</p>
							<p className="text-16px font-600 flex items-center">
								<span className="mr-10px">空闲设备</span> <RightOutlined />
							</p>
						</div>
					</div>
				</li>

				<li className="flex-1 h-160px controlBg3  c-#fff cursor-pointer" onClick={() => view_status(2)}>
					<div className="flex justify-center mt-20px">
						<div className="controlIcon3 w-80px h-80px mr-40px"></div>
						<div>
							<p className="text-44px font-700">{top_info.busy_devices}</p>
							<p className="text-16px font-600 flex items-center">
								<span className="mr-10px">运行中设备</span> <RightOutlined />
							</p>
						</div>
					</div>
				</li>

				<li className="flex-1 h-160px controlBg4  c-#fff cursor-pointer" onClick={() => view_status(3)}>
					<div className="flex justify-center mt-20px">
						<div className="controlIcon4 w-80px h-80px mr-40px"></div>
						<div>
							<p className="text-44px font-700">{top_info.abnormal_devices}</p>
							<p className="text-16px font-600 flex items-center">
								<span className="mr-10px">异常设备</span> <RightOutlined />
							</p>
						</div>
					</div>
				</li>
			</ul>
			<SceneList />

			{isModalOpen && <PicoList status={status} isModalOpen={[isModalOpen, setIsModalOpen]} top_info={top_info} />}
			{isModalOpenAdd && <Add_edit type="add" isModalOpen={[isModalOpenAdd, setIsModalOpenAdd]} top_info={top_info} />}
		</div>
	);
}
